<!-- App.vue -->
<template>
    <div class="p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      <div 
        v-for="(item, index) in products" 
        :key="index" 
        class="bg-white dark:bg-zinc-800 rounded-lg shadow-md p-4"
      >
        <h2 v-if="item.title" class="text-lg font-bold text-zinc-800 dark:text-zinc-200">{{ item.title }}</h2>
        <p v-if="item.subtitle" class="text-sm text-zinc-500 dark:text-zinc-400">{{ item.subtitle }}</p>
        <img :src="item.image" :alt="item.altText" class="w-full h-auto mt-2">
        <p class="text-zinc-800 dark:text-zinc-200 mt-2">{{ item.name }}</p>
        <p v-if="item.price" class="text-orange-500">{{ item.priceText }}</p>
        <p v-if="item.originalPrice && item.discountPrice" class="text-zinc-800 dark:text-zinc-200">
          {{ item.discountPrice }} <span class="line-through">{{ item.originalPrice }}</span>
        </p>
        <p v-if="item.priceWithoutDiscount" class="text-zinc-800 dark:text-zinc-200">{{ item.priceWithoutDiscount }}</p>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        products: [
          {
            title: '上新精选',
            subtitle: '30款上新',
            image: 'https://placehold.co/300x150',
            altText: 'Product Image',
            name: '爱幕Q1 Pro掌上投影仪',
            priceText: '仅0.14KG，内置电池，随身带'
          },
          {
            title: '生活优选',
            subtitle: '生活必备好物，放心买',
            image: 'https://placehold.co/300x150',
            altText: 'Product Image',
            name: '快来抢购！！！',
            priceText: '家庭必备'
          },
          {
            title: '小米up会员',
            subtitle: '购买5单返现会员',
            image: 'https://placehold.co/300x150',
            altText: 'Product Image',
            name: '多买多得',
            priceText: '好'
          },
          {
            title: 'XXXXXX',
            subtitle: 'XXXXXXXXXX',
            image: 'https://placehold.co/300x150',
            altText: 'Product Image',
            name: 'XXXXXXXX',
            priceText: 'XXXXXXX'
          },
          {
            title: 'XXXXXX',
            subtitle: 'XXXXXXXXXX',
            image: 'https://placehold.co/300x150',
            altText: 'Product Image',
            name: 'XXXXXXXX',
            priceText: 'XXXXXXX'
          },
          {
            title: 'XXXXXX',
            subtitle: 'XXXXXXXXXX',
            image: 'https://placehold.co/300x150',
            altText: 'Product Image',
            name: 'XXXXXXXX',
            priceText: 'XXXXXXX'
          },
          {
            title: 'XXXXXX',
            subtitle: 'XXXXXXXXXX',
            image: 'https://placehold.co/300x150',
            altText: 'Product Image',
            name: 'XXXXXXXX',
            priceText: 'XXXXXXX'
          },
          {
            title: 'XXXXXX',
            subtitle: 'XXXXXXXXXX',
            image: 'https://placehold.co/300x150',
            altText: 'Product Image',
            name: 'XXXXXXXX',
            priceText: 'XXXXXXX'
          },
          {
            title: 'XXXXXX',
            subtitle: 'XXXXXXXXXX',
            image: 'https://placehold.co/300x150',
            altText: 'Product Image',
            name: 'XXXXXXXX',
            priceText: 'XXXXXXX'
          },
          {
            title: 'XXXXXX',
            subtitle: 'XXXXXXXXXX',
            image: 'https://placehold.co/300x150',
            altText: 'Product Image',
            name: 'XXXXXXXX',
            priceText: 'XXXXXXX'
          },
          {
            title: 'XXXXXX',
            subtitle: 'XXXXXXXXXX',
            image: 'https://placehold.co/300x150',
            altText: 'Product Image',
            name: 'XXXXXXXX',
            priceText: 'XXXXXXX'
          },
          {
            title: 'XXXXXX',
            subtitle: 'XXXXXXXXXX',
            image: 'https://placehold.co/300x150',
            altText: 'Product Image',
            name: 'XXXXXXXX',
            priceText: 'XXXXXXX'
          },
        ],
      };
    },
  };
</script>
  
<style>
  @import "https://cdn.jsdelivr.net/npm/tailwindcss@^2/dist/tailwind.min.css";
</style>